import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:kkhousekeep/page/login/reset_pwd_page_controller.dart';

import '../../widget/custom_button.dart';

class ResetPwdPage extends StatelessWidget {
  const ResetPwdPage({super.key, required this.phone});

  final String phone;

  @override
  Widget build(BuildContext context) {
    return GetBuilder(
      init: ResetPwdPageController(phone),
      builder: (controller) => Container(
        decoration: const BoxDecoration(
            image: DecorationImage(
                image: AssetImage("assets/images/page_bg.png"),
                fit: BoxFit.fill)),
        child: Scaffold(
          resizeToAvoidBottomInset: false,
          extendBodyBehindAppBar: true,
          backgroundColor: Colors.transparent,
          appBar: AppBar(
            elevation: 0,
            foregroundColor: Colors.transparent,
            backgroundColor: Colors.transparent,
          ),
          body: Stack(
            children: [
              Positioned(
                top: 218.h,
                left: 64.w,
                child: _buildSignText(),
              ),
              Positioned(
                top: 400.h,
                left: 24.w,
                child: _buildCenterWidget(controller),
              )
            ],
          ),
        ),
      ),
    );
  }

  ///标识文本组件
  Widget _buildSignText() {
    return Row(
      children: [
        InkWell(
          child: Image.asset(
            "assets/images/login_back_icon.png",
            width: 48.w,
            height: 48.w,
          ),
          onTap: () => Get.back(),
        ),
        Text(
          "重置密码",
          style: TextStyle(fontSize: 48.sp, fontWeight: FontWeight.w600),
        )
      ],
    );
  }

  ///中间组件
  Widget _buildCenterWidget(ResetPwdPageController controller) {
    return Container(
      height: 1224.h,
      width: 702.w,
      padding: EdgeInsets.only(
        left: 40.w,
      ),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(48.w),
          topRight: Radius.circular(48.w),
        ),
      ),
      child: Stack(
        children: [
          Positioned(
            top: 120.h,
            child: SizedBox(
              width: 622.w,
              child: _buildFirstPwdText(controller),
            ),
          ),
          Positioned(
            top: 242.h,
            child: SizedBox(
              width: 622.w,
              child: _buildSecondPwdText(controller),
            ),
          ),
          Positioned(
            top: 456.h,
            child: _buildBottomWidget(controller),
          ),
        ],
      ),
    );
  }

  ///第一个密码文本组件
  Widget _buildFirstPwdText(ResetPwdPageController controller) {
    return Obx(
      () => TextField(
        controller: controller.oncePwdController,
        onChanged: (_) => controller.observerText(),
        obscureText: controller.isHideOncePwd.value,
        inputFormatters: [LengthLimitingTextInputFormatter(16)],
        decoration: InputDecoration(
          enabledBorder: const UnderlineInputBorder(
            borderSide: BorderSide(
              color: Color(0xFFF2F0F0),
            ),
          ),
          focusedBorder: const UnderlineInputBorder(
            borderSide: BorderSide(
              color: Color(0xFFF2F0F0),
            ),
          ),
          hintText: "请输入8-16位密码",
          hintStyle: TextStyle(fontSize: 32.sp, color: const Color(0xFF999999)),
          suffixIcon: InkWell(
            onTap: () => controller.changeOncePwdState(),
            child: Container(
              padding: EdgeInsets.all(23.h),
              child: Image(
                  width: 48.w,
                  height: 48.h,
                  image: AssetImage(controller.isHideOncePwd.value
                      ? "assets/images/login_hide_pwd_icon.png"
                      : "assets/images/login_show_pwd_icon.png")),
            ),
          ),
        ),
      ),
    );
  }

  ///第二个密码文本组件
  Widget _buildSecondPwdText(ResetPwdPageController controller) {
    return Obx(() => TextField(
          controller: controller.twicePwdController,
          onChanged: (_) => controller.observerText(),
          obscureText: controller.isHideTwicePwd.value,
          inputFormatters: [LengthLimitingTextInputFormatter(16)],
          decoration: InputDecoration(
            enabledBorder: const UnderlineInputBorder(
              borderSide: BorderSide(
                color: Color(0xFFF2F0F0),
              ),
            ),
            focusedBorder: const UnderlineInputBorder(
              borderSide: BorderSide(
                color: Color(0xFFF2F0F0),
              ),
            ),
            hintText: "请确认新密码",
            hintStyle:
                TextStyle(fontSize: 32.sp, color: const Color(0xFF999999)),
            suffixIcon: InkWell(
              onTap: () => controller.changeTwicePwdState(),
              child: Container(
                padding: EdgeInsets.all(23.h),
                child: Image(
                    width: 48.w,
                    height: 48.h,
                    image: AssetImage(controller.isHideTwicePwd.value
                        ? "assets/images/login_hide_pwd_icon.png"
                        : "assets/images/login_show_pwd_icon.png")),
              ),
            ),
          ),
        ));
  }

  ///按钮组件
  Widget _buildBottomWidget(ResetPwdPageController controller) {
    return Obx(
      () => CustomButton(
        text: "确定",
        isAsh: controller.isButtonAsh.value,
        width: 622.w,
        height: 96.h,
        onPressed: () => controller.resetPwd(),
      ),
    );
  }
}
